<template>
  <section class="mui-content pd">
    <mh-header headName="地址管理"> </mh-header>
    <nav class="tab-menu flex-bt bg-w">
      <a href="javascript:" :class="{active: activeType === 1}" @click="handleTab(1)">旅游</a>
      <a href="javascript:" :class="{active: activeType === 2}" @click="handleTab(2)">品茶</a>
      <a href="javascript:" :class="{active: activeType === 3}" @click="handleTab(3)">狼游</a>
      <a href="javascript:" :class="{active: activeType === 4}" @click="handleTab(4)">聚餐</a>
      <a href="javascript:" :class="{active: activeType === 5}" @click="handleTab(5)">其他</a>
    </nav>

    <ul class="add-list bg-w">
      <li class="add-item" v-for="(item, index) in addressList" :key="index">
        <div class="mh-pd">
          <div class="add-head flex-bt">
            <span v-text="item.contacts">姓名</span>
            <span v-text="item.contacts_phone">1765889</span>
          </div>
          <p class="add-inner" v-text="item.address">地址</p>
        </div>

        <div class="add-foot flex-bt mh-pd">
          <span class="ad-f-lt mui-pull-left" @click='setLi(item.id)'>
            <img v-if='item.status==1' src="../../assets/images/ico/icon-radio-check.png">
            <img v-else src="../../assets/images/ico/icon-radio.png">
            使用
          </span>
          <div class="ad-f-rt mui-pull-right">
            <button type="button" class="btn-edit" @click='editLi(item.id)'>编辑</button>
            <button type="button" class="btn-del" @click='removeLi(item.id)'>删除</button>
          </div>
        </div>
      </li>
    </ul>

    <div class="fix-btn-row" @click="newAddress">
      <i class="mui-icon mui-icon-plusempty"></i>
      <span class="new-txt">新增</span>
    </div>
  </section>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "mind-match",
    data () {
      return {
        activeType: 1,
        addressList: [

        ]
      }
    },
    methods: {
      //设为默认地址
      setLi(id){
        let self = this;
        MH_API.defaultAddress({
          id: id
        }).then(res => {
          if (res.status === 200) {
            mui.toast("设置成功");
            self.getData(self.activeType);
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      editLi(id){
        this.$router.push({
          path: '/addAddress',
          query: {
            id: id
          }
        })
      },
      removeLi(id){
        let self = this;
        let btnArray = ['取消', '确定'];
        mui.confirm('确认删除吗？', '提示', btnArray, function(e) {
          if (e.index === 1) {
            MH_API.delAddress({
              id: id
            }).then(res => {
              if (res.status === 200) {
                mui.toast('删除成功');
                self.getData(self.activeType);
              }
              else{
                mui.toast(res.msg)
              }
            })
          } else {

          }
        })

      },
      handleTab (i) {
        this.activeType = i;
        this.getData(i);
      },
      newAddress () {
        this.$router.push({name: 'addAddress'})
      },
      getData(type){
        let self = this;
        let params = {
          type: type
        };
        MH_API.getAddresss(params).then(res => {
          if (res.status === 200) {
            self.addressList = res.data;
          }
        })
      }
    },
    components: {
      MhHeader
    },
    created(){
      this.getData(1);
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .ad-f-lt{ font-size: 1.2rem;}
  .ad-f-lt img{ height:1.6rem;}
  .add-list{ display:block; padding-bottom: 4rem;}
  .tab-menu {
    padding: 0 3.5rem;
    border-bottom: 1px solid #eee;
    a {
      position: relative;
      padding: 1rem 0;
      flex: 1;
      text-align: center;
      @include sc(1.4rem, #999);
      &.active {
        color: #dd65a1;
        &:after {
          display: inline-block;
          width: 40%;
          height: .1rem;
          content: '';
          border-bottom: 0;
          background: #dd65a1;
          @include cl();
          bottom: 0;
        }
      }
    }
  }
  .add-item {
    border-bottom: .5rem solid #f5f5f5;
  }
  .add-head {
    padding-bottom: 1rem;
    @include sc(1.4rem, #000004);
  }
  .add-foot {
    border-top: 1px solid #eee;
  }
  .add-inner {
    @include sc(1.2rem, #999);
    background: url("../../assets/images/hnico/ic_address.png") no-repeat right center;
    background-size: 1.1rem 1.3rem;
  }
  .btn-edit {
    padding-left: 1.8rem;
    @include sc(1.2rem, #999);
    background: url("../../assets/images/hnico/ic_edit.png") no-repeat left center;
    background-size: 1.45rem 1.55rem;
  }
  .btn-del {
    margin-left: 1.5rem;
    padding-left: 1.8rem;
    @include sc(1.2rem, #999);
    background: url("../../assets/images/hnico/ic_del.png") no-repeat left center;
    background-size: 1.5rem 1.55rem;
  }
  .radio {
    padding-left: 2rem;
    @include sc(1.2rem, #999);
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat left center;
    background-size: 1.6rem 1.65rem;
  }
  .fix-btn-row {
    position: fixed;
    width: 100%;
    height: 4.2rem;
    line-height: 4.2rem;
    color: #fff;
    font-size: 1.5rem;
    background: #e685aa;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
